// 创建 “外壳” 组件App
import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'
// 创建并暴露App组件
export default class App extends Component {
  //  状态在哪里 ,操作状态的方法就在哪里
  state = {
    todos: [
      {
        id: '001',
        name: '吃饭',
        done: true
      },
      {
        id: '002',
        name: '睡觉',
        done: true
      },
      {
        id: '003',
        name: '打代码',
        done: false
      },
      {
        id: '004',
        name: '逛街',
        done: true
      },
    ]
  }
  //传递给Header组件的方法 从子组件传递过来的参数 todoObj
  addTodo = (todoObj) => {  // todoObj  接收来自子组件的参数
    //获取原来的todos
    let { todos } = this.state
    let newtodos = [todoObj, ...todos]
    this.setState({ todos: newtodos }) //更新状态
  }

  //  传递给List组件的方法  从子组件传递过来的参数 id done
  updateTodo = (id, done) => {
    //获取状态中的todos
    let { todos } = this.state
    const newTodos = todos.map((item) => {
      if (item.id === id) return { ...item, done }
      else return item
    })
    this.setState({ todos: newTodos })  //修改状态
  }

  //用于删除一个todo对象
  headleDelete = (id) => {
    let { todos } = this.state
    this.setState({ todos: todos.filter(item => item.id !== id) })
  }

  //用于全选或取消全选
  checkAllTodo = (status) => {
    let { todos } = this.state
    const newTodos = todos.map(item => {
      return { ...item, done: status }
    })
    this.setState({ todos: newTodos })
  }

  // 清除所有已完成的列表
  clearAllDone = () => {
    let { todos } = this.state
    this.setState({ todos: todos.filter(item => !item.done) })
  }

  render() {
    const { todos } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todos={todos} updateTodo={this.updateTodo} headleDelete={this.headleDelete} />
          <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone} />
        </div>
      </div>
    )
  }
}


